<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:auto;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
		h2{ text-align:center; padding:10px; font-size:20px;}
		a{color:#007bc4/*#424242*/; text-decoration:none;}
		a:hover{text-decoration:underline}
		ol,ul{list-style:none}
		table{border-collapse:collapse;border-spacing:0}
		body{height:100%; font:12px; sans-serif; color:#51555C; background:#2C2C2C }
		#main_demo{width:910px; min-height:600px; margin:30px auto 0 auto; background:#fff; -moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}
		#results{
			font: 12px Arial, Helvetica, sans-serif;
			width: 400px;
			margin-left: auto;
			margin-right: auto;
		}
		#results .loading-indication{
			background:#FFFFFF;
			padding:10px;
			position: absolute;
		}
		.paginate {
			padding: 0px;
			margin: 0px;
			height: 30px;
			display: block;
			text-align: center;
		}
		.paginate li {
			display: inline-block;
			list-style: none;
			padding: 0px;
			margin-right: 1px;
			width: 30px;
			text-align: center;
			background: #4CC2AF;
			line-height: 25px;
		}
		.page_result{
			padding: 0px;
		}
		.page_result li{
			background: #E4E4E4;
			margin-bottom: 5px;
			padding: 5px;
			height: 15px;
			font-size: 12px;
			list-style: none;
		}
		.page_result .page_name {
			font-size: 14px;
			font-weight: bold;
			margin-right: 5px;
		}
		.message_right {
			float: right;
			margin-left: 5px;
		}
		.message_left {
			float: left;
			margin-right: 5px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			var loginname = window.prompt("请输入你的真实姓名");
			
			//http://10.20.156.5/AJAX/chat?type=send&sender="+document.loginuser+"&msg="+msg;
			var sendBtn = document.getElementById("send_msg");
			var inputArea = document.getElementById("postmsg");
			var oUL = document.getElementById("page_result");
			
			sendBtn.onclick = function(){
				var req = new XMLHttpRequest();
				req.open("get","http://10.20.156.5/AJAX/chat?type=send&sender="+loginname+"&msg="+inputArea.value, true);
				req.send();
				inputArea.innerHTML = "";
			}
			
			// "http://10.20.156.5/AJAX/chat?type=query
			//定时获取消息
			
			setInterval(function(){
				var req = new XMLHttpRequest();
				req.open("get","http://10.20.156.5/AJAX/chat?type=query",true);
				req.onreadystatechange = function(){
					if(req.readyState == 4) {
						//eval("var a=0; var b=5; alert(a+b)");
						var list = JSON.parse(req.responseText);
						oUL.innerHTML = "";
						for(var i in list){
							var li = document.createElement("li");
							var spana = document.createElement("span");
							var spanb = document.createElement("span");
							spanb.className = spana.className = "message_left";
							spana.innerText = "【"+list[i].name+"】";
							spanb.innerText = list[i].content;
							li.appendChild(spana);
							li.appendChild(spanb);
							oUL.appendChild(li);
							li.scrollIntoView();
						}
					}
				}
				req.send();
			}, 4000);
		}
	</script>
	<body>
		<div id="main_demo">
			<div id="results">
				<ul class="page_result" id="page_result" style="height:380px; overflow-y:scroll; vertical-align:text-bottom;text-align:bottom">
					<li>
						<span class="message_right">【yintao】</span>
						<span class="message_right">哈哈哈哈</span>
					</li>
					<li>
						<span class="message_left">【xiaoming】</span>
						<span class="message_left">aaaaaaaaaaaaaaaaa</span>
					</li>
					<li>
						<span class="message_left">【xiaoming】</span>
						<span class="message_left">bbbbbbbbbb</span>
					</li>
					<li >
						<span class="message_left">【xiaoming】</span>
						<span class="message_left">ccccccccccccc</span>
					</li>
				</ul>
				<div align="center">
					<textarea id="postmsg" style="width:390px;"></textarea>
					<button class="load_more" id="send_msg" style="display: inline-block;">发送</button>
				</div>
			</div>
		</div>
	</body>

</html>